<template>
	<view class="container">
		<view class="header">
			<view class="header-item gui-color-black">单号： {{ form.code }}</view>
			<!-- <view class="header-item gui-color-black" style="margin-top: 15rpx;">盘点人 123457899</view> -->
			<view class="gui-margin-top gui-flex gui-space-between gui-color-black" @click="showSelect">
				<view>
					<text class="" style="margin-right:10rpx">类型：</text>
					{{ typeText }}
				</view>
				<text class="gui-icons gui-color-gray">&#xe601;</text>
			</view>
			<view class="gui-margin-top">
				<textarea v-model="form.remark" name="remark" value="" placeholder="请输入备注选填"
					class="gui-textarea gui-bg-gray gui-border-box" style="width:690rpx;" />
			</view>
		</view>
		<view class="footer">
			<view class="gui-text-center gui-bg-light footer-button" hover-class="gui-tap" @click="toProduct">
				<text
					class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center">开始出库</text>
			</view>
		</view>
		<view style="height:80rpx"></view>
		<uni-popup ref="popup1" background-color="#fff" type="bottom" :mask-click="false">
			<view class="popup-content">
				<view class="select-list">
					<view class="select-list-item gui-border-b" v-for="(item,index) in selectList" :key="item.key" @click="handleClickSelectItem(item,index)">
					  <text class="gui-icons icons-active" v-if="currentIndex === index">&#xe7f8;</text>
					  <text class="gui-icons icons-default" v-else>&#xe762;</text>
					  {{ item.label }}
					</view>
				</view>
			</view>
			<view style="height:80rpx"></view>
			<view class="popup-button" style="margin:30rpx">
				<view class="gui-text-center gui-bg-light login-btn" hover-class="gui-tap" @click="handleClickSaveSelect">
					<text
						class="gui-text gui-color-white gui-footer-large-button-text gui-block-text gui-text-center ">确定</text>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					remark: "",
					code: '',
					category:''
				},
				typeText:"请选择",
				currentIndex:-1,
				current:{},
				selectList: [{
						key: 1,
						value: 11,
						label: "损耗"
					},
					{
						key: 2,
						value: 12,
						label: "盘损"
					},
					{
						key: 3,
						value: 13,
						label: "赠送"
					},
					{
						key: 4,
						value: 14,
						label: "领料"
					},
					{
						key: 5,
						value: 15,
						label: "其他"
					},
				]
			}
		},
		onLoad() {
			this.form.code = 'CK' + this.$dayjs().format('YYYYMMDDHHmmss')
			uni.setStorageSync('message', '');
		},
		methods: {
			toProduct() {
				if(!this.form.category){
					uni.showToast({
						title: '请选择类型',
						icon: 'none'
					});
					return false;
				}
				uni.setStorageSync('message', this.form);
				uni.navigateTo({
					url: `/pages/outbound/product`
				})
			},
			showSelect(){
				this.$refs.popup1.open();
			},
			handleClickSelectItem(item,index){
				this.current = item;
				this.currentIndex = index
			},
			handleClickSaveSelect(){
				this.$refs.popup1.close();
				this.typeText = this.current.label;
				this.form.category = this.current.value
			}
		}
	}
</script>

<style scoped lang="scss">
	.header {
		background-color: #fff;
		padding: 30rpx;
		box-shadow: 0 0 5px #eee;
	}

	.gui-bg-light {
		background-color: #9e7e35;
	}
	.select-list{
		margin:30rpx;
		.select-list-item{
			height:90rpx;
			line-height: 90rpx;
			color:#333;
			.gui-icons{
				margin-right:20rpx
			}
			.icons-active{
				color:#9e7e35
			}
		}
	}
	.gui-bg-light{
		border-radius:40rpx;
		background-color: #9e7e35;
	}
	.footer{
		background-color: #fff;
	}
	
</style>